<!DOCTYPE HTML>
<html>
<head>
  <title>Lab dashboard</title>
  <link href='bootstrap/css/bootstrap.css' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Oxygen|Dancing+Script' rel='stylesheet' type='text/css'>
  <link href='css/nv.d3.css' rel='stylesheet' type='text/css'>
  <link href='css/style.css' rel='stylesheet' type='text/css'>
</head>

<body>
  <ul class="nav nav-tabs" id="labChooser">
  </ul>
  <div class="tab-content row-fluid" id="labDashboard">
    <div class="span3" id="gauges" style="display:none">
      <ul class="nav nav-pills nav-stacked" id="KPIChooser">
      </ul>
    </div>
    <div id="waiting"><img src="https://lh3.googleusercontent.com/-vHrskUPdmvM/T8zu1UE91nI/AAAAAAAAAYs/4dek7fbrHik/s800/spinner.gif"></div>
    <div class="span6" id="chart" style="display:none">
      <h3 class="text-center" id="selectedKPI"><span class="name"></span> <span class="label unit"></span></h3>
      <div id="mainChart"><svg></svg></div>
    </div>
    <div class="span2" id="bestPractices" style="display:none">
      <h4 class="text-center"><a target='_blank' href="https://sites.google.com/a/essilor.fr/loft-best-practices"><img src="https://lh3.googleusercontent.com/-9hVRPSwHlsM/UQel0R0ycGI/AAAAAAAAB2o/I_5nSe6EBqA/s800/LOFT_LOFT%2520Best%2520Practices%2520favicon.png"><br>Best practices</a></h4>
      <small>If you're not already part of the best practices community, <a href="https://sites.google.com/a/essilor.fr/loft-best-practices/community/request-access" target="_blank"><img class="icon" style="vertical-align:middle" src="https://lh5.googleusercontent.com/-vIPOES_oy0k/UA_iSgozOZI/AAAAAAAABOc/EdVrFxmEso0/s800/user_add%255B1%255D.png">register here</a>.</small>
      <ul class="nav nav-list" id="associatedBPList" style="max-height:300px;overflow-x:auto;">
      </ul>
    </div>
  </div>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
  <script type="text/javascript" src="js/date.js"></script>
  <script type="text/javascript" src="js/gauge.min.js"></script>
  <script type="text/javascript" src="js/d3.v2.js"></script>
  <script type="text/javascript" src="js/nv.d3.js"></script>

  <script type="text/javascript">

  function drawLabs(labs){
    for(var i in labs){
      $("#labChooser").append("<li><a href='#'>"+labs[i]+"</li>");
    }
    $('#labChooser a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
      $("#labDashboard > div").hide();
      $("#labDashboard #waiting").show();
      $("#selectedKPI span").empty();
      $("#mainChart svg").empty();
      $.getScript("https://script.google.com/a/macros/essilor.fr/s/AKfycbyzbHUscyh0oogD6iy8Ict2kyQwfEnv38P6jSwMAVLgnYuwb1QS/exec?prefix=drawGauges&request=lab&lab="+$(this).text());
    });
    $("#labDashboard #waiting").hide();
  }

  function drawGauges(KPIs){
    $("#KPIChooser").empty();
    var lab = $("#labChooser .active").text();
    console.log(lab);
    for(var i in KPIs){
      KPI = KPIs[i];
      $("#KPIChooser").append("<li class='KPI' id='KPI-"+KPI.column+"'><a href='#'><span class='span5'><strong class='title'><i class='icon-arrow-up'></i> "+KPI.name+"</strong><br><span class='label label-info unit'>"+KPI.unit+"</span></span><span id='gauge-"+KPI.column+"'class='span5'></a></span></li>");
      var opts = {
        lines: 12, // The number of lines to draw
        angle: 0.15, // The length of each line
        lineWidth: 0.44, // The line thickness
        pointer: {
          length: 0.9, // The radius of the inner circle
          strokeWidth: 0.035, // The rotation offset
          color: '#000000' // Fill color
        },
        colorStart: 'green',   // Colors
        strokeColor: 'red'  // to see which ones work best for you
      };
      if(KPI.order == 'desc'){
        opts.colorStart = 'red'
        opts.strokeColor = 'green';
      }
      var canvas = document.createElement("canvas");
      document.getElementById("gauge-"+KPI.column).appendChild(canvas);
      var gauge = new Gauge(canvas); // create gauge
      if(KPI.order == 'desc'){
        $("#KPIChooser #KPI-"+KPI.column+" .title i").attr('class', "icon-arrow-down");
        gauge.minValue = KPI.values.BIC.value;
        gauge.maxValue = 2*KPI.values.Average.value - KPI.values.BIC.value;
      }
      else{
        gauge.minValue = 2*KPI.values.Average.value - KPI.values.BIC.value;
        gauge.maxValue = KPI.values.BIC.value;
      }
      if(KPI.values[lab] != undefined){
        gauge.set(KPI.values[lab].value); // set actual value
        $("#KPIChooser #gauge-"+KPI.column).append("<p>"+KPI.values[lab].value+"</p>");
      }
      else{
        opts.strokeColor = 'lightgray';
        opts.colorStart = 'lightgray';
        $("#KPIChooser #gauge-"+KPI.column).append('No data');
      }
      gauge.setOptions(opts);
    }

    $("#KPIChooser .KPI").click(function (e) {
      $("#labDashboard #waiting").show();
      var element = $(this);
      element.addClass('disabled');
      $.getScript("https://script.google.com/a/macros/essilor.fr/s/AKfycbyzbHUscyh0oogD6iy8Ict2kyQwfEnv38P6jSwMAVLgnYuwb1QS/exec?prefix=drawChart&request=KPI&lab="+lab+"&KPI="+$(this).attr('id').split("-")[1], function() {
        $("#KPIChooser .KPI").removeClass('active');
        element.removeClass('disabled').addClass('active');
      });
    });

    $("#gauges").show();
    $("#labDashboard #waiting").hide();
  }


  function drawChart(response){
    //parse dates
    for(var i in response.data)
      for(var j in response.data[i].values)
        response.data[i].values[j].x = new Date(response.data[i].values[j].x);

      $("#selectedKPI .name").text(response.KPI.name);
      $("#selectedKPI .unit").text(response.KPI.unit);


      $("#labDashboard #waiting").hide();
      $("#bestPractices").show();
      $("#chart").show();
    //draw the chart
    var chart = nv.models.lineWithFocusChart();
    chart.xAxis
    .showMaxMin(false)
    .ticks(d3.time.months,1)
    .tickFormat(function(d) { return d3.time.format('%b %y')(new Date(d)) });
    chart.x2Axis
    .showMaxMin(false)
    .ticks(d3.time.months,6)
    .tickFormat(function(d) { return d3.time.format('%b %y')(new Date(d)) });
    chart.yAxis.showMaxMin(false)
    .axisLabel(response.KPI.name);
    chart.y2Axis.showMaxMin(false).ticks(0);
    d3.select('#mainChart svg')
    .datum(response.data)
    .transition().duration(1000)
    .call(chart);
    nv.utils.windowResize(chart.update);

    $("#bestPractices ul").empty();
    for(var i in response.bestPractices){
      $("#bestPractices ul").append('<li><a target="_blank" href="'+response.bestPractices[i].url+'">'+response.bestPractices[i].title+' <span class="badge badge-info"><i class="icon-star"></i>'+response.bestPractices[i].popularity+'</span></a></li>');
    }
  }

  </script>

  <script src="https://script.google.com/a/macros/essilor.fr/s/AKfycbyzbHUscyh0oogD6iy8Ict2kyQwfEnv38P6jSwMAVLgnYuwb1QS/exec?prefix=drawLabs"></script>

</body>
